<template>
    <div>
    <model-stl
        :position = "position"
        :rotation="rotation"
        :cameraPosition='cameraPosition'
        :cameraRotation='cameraRotation'
        :scale='scale'
        style = 'height : 540px; background-color: transparent'
        src="static/model/mantarayrobot.STL"></model-stl>
    </div>
</template>

<script>
import { ModelStl } from 'vue-3d-model'

const rotationFix = {
    x : 0.53,
    y : 0.82,
    z : 0
}
const positionFix = {
    x: 50,
    y: 600,
    z: -500
}

export default {
    name: 'model',
    data() {
        return {
            position: {
              x: 50,
              y: 600,
              z: -500
            },
            rotation: {
                x : 0.53,
                y : 0.82,
                z : 0
            },
            cameraPosition : {
                x: 0,
                y: 0,
                z: 0
            },
            cameraRotation : { x: 3, y: 2, z: -1 },
            scale : {
                x : 1,
                y : 1,
                z : 1
            },
            left: false,
            right: false
        }
    },
    created() {
        var _this = this;
        // window.setInterval(this.consolelog, 100)
        // 监听游戏手柄
        window.addEventListener("gamepadconnected", function(e) {
            var gp = navigator.getGamepads()[e.gamepad.index];
            // console.log(gp);
            _this.startgamepad(); // 启动手柄
        });
        // 监听游戏手柄拔出
        window.addEventListener("gamepaddisconnected", function(e) {
            clearInterval(_this.interval); // 停止获取手柄数据
        });
    },
    methods: {
        consolelog : function() {
            console.log("rotation:" + this.rotation.x + " " + this.rotation.y + " " + this.rotation.z)
            console.log("position:" + this.position.x + " " + this.position.y + " " + this.position.z)
            console.log("camrotation:" + this.cameraRotation.x + " " + this.cameraRotation.y + " " + this.cameraRotation.z)
            console.log("camposition:" + this.cameraPosition.x + " " + this.cameraPosition.y + " " + this.cameraPosition.z)
        },
        leftRotate () {
            this.rotation.y -= 0.01
            let rot = Math.abs(this.rotation.y)
            while (rot > Math.PI * 2) {
                rot -= Math.PI * 2
            }
                this.position.z -= 10 * Math.cos(rot);
                this.position.x -= 7 * Math.sin(rot);
        },
        rightRotate () {
            this.rotation.y += 0.01
            let rot = Math.abs(this.rotation.y)
            while (rot > Math.PI * 2) {
                rot -= Math.PI * 2
            }
                this.position.z += 10 * Math.cos(rot);
                this.position.x += 7 * Math.sin(rot);
        },
        upRotate () {
            this.rotation.x -= 0.01;
            // requestAnimationFrame( this.rotate );
        },
        downRotate () {
            this.rotation.x += 0.01;
            // requestAnimationFrame( this.rotate );
        },
        reset() {
            // console.log("rotation" + this.rotation.x + ' ' + this.rotation.y + ' ' + this.rotation.z)
            // console.log("rotationFix" + rotationFix.x + ' ' + rotationFix.y + ' ' + rotationFix.z)
            this.rotation = this.newForm = Object.assign({}, rotationFix); //不这么写会变成引用导致原值改变
            this.position = this.newForm = Object.assign({}, positionFix); //不这么写会变成引用导致原值改变
        },
        onload() {
            // this.rotate()

        },
        rotate() {
            this.rotation.y += 0.01
            let rot = this.rotation.y
            while (rot > Math.PI * 2) {
                rot -= Math.PI * 2
            }
            if (rot <= Math.PI / 2.0 || rot >= 3.0 * Math.PI / 2.0)
                this.position.z += 7;
            else
                this.position.z -= 7;

            if (rot <= Math.PI || rot >= Math.PI * 2.0) {
                this.position.x += 3;
                // console.log("add x")
            }
            else
                this.position.x -= 3;
            requestAnimationFrame( this.rotate );
        },

        // 启动手柄
        startgamepad() {
            var _this = this;
            // 每200ms 获取一次手柄数据，查看是否按下手柄按键
            this.interval = setInterval(function() {
                var gamepad = navigator.getGamepads()[0];
                _this.remoteSensing(gamepad.axes);
                // _this.consolelog();
                // _this.pressKey(gamepad.buttons);
            }, 20);
        },
        // 手柄遥感
        remoteSensing(arr) {
            let eps = 2e-1 //降低敏感度以提升兼容
            // console.log(arr);
            // 下面是个人测试的：
            // arr[0] -1 ~ 1 : 左手边 左 ~ 右
            // arr[1] -1 ~ 1 : 左手边 上 ~ 下
            // arr[2] -1 ~ 1 : 右手边 左 ~ 右
            // arr[3] -1 ~ 1 : 右手边 上 ~ 下
            //right remote
            if (Math.abs(arr[2]) > eps) {
                if (arr[2] > 0) {
                    this.rightRotate()
                }
                else {
                    this.leftRotate()
                }
            }
            if (Math.abs(arr[3]) > eps) {
                if (arr[3] > 0) {
                    this.downRotate()
                }
                else {
                    this.upRotate()
                }
            }
        },
        // 手柄按键
        pressKey(arr) {
        },
    },
    components: {
        ModelStl
    }
}
</script>

<style scoped>

</style>
